<style lang="less" scoped>
@import "../../styles/common.less";
@import "./table.less";
.detail-item {
  width: 33.333%;
  padding: 8px 12px 8px 0;
  @media screen and (max-width: 768px) {
    width: 100%;
    border-bottom: 1px dotted #ddd;
  }
}
.detail-item-1 {
  width: 100%;
}
.echarts {
  width: 100%;
  height: 260px;
}
</style>

<template>
    <div>
        <Row type="flex" justify="space-between" style="margin: 12px 0">
            <div style="display: flex; min-width: 300px">
                <span style="margin: 0 12px; line-height: 32px;">设备编号: </span>
                <Select
                    style="width: calc(100% - 80px)"
                    v-model="selectedDevice"
                    filterable
                    remote
                    :remote-method="remoteSearch"
                    :loading="loadingDevice">
                    <Option v-for="(option, index) in deviceOptions" :value="option.value" :key="index">{{option.label}}</Option>
                </Select>
            </div>
            <div style="display: flex">
                <DatePicker :value="selectedDateRange" type="datetimerange" :options="dateOptions" placeholder="请选择时间范围" style="width: 280px; margin-right: 12px;"></DatePicker>
                <Button type="primary">查看</Button>
            </div>
        </Row>
        <Row>
            <Card style="margin-bottom: 16px;">
                <div slot="title" style="padding: 0 12px;">
                    <h4 style="display: inline-block; margin-right: 8px">设备类型：核磁共振仪</h4>
                </div>
                <div style="padding: 0 12px; display: flex; justify-content: flex-start; flex-wrap: wrap;">
                    <div class="detail-item"><strong>状态: </strong><Tag color="green">使用中</Tag></div>
                    <div class="detail-item"><strong>电源: </strong>正常</div>
                    <div class="detail-item"><strong>插座: </strong>正常</div>
                    <div class="detail-item"><strong>平均工作电压: </strong>222.15 V</div>
                    <div class="detail-item"><strong>平均工作电流: </strong>41.95 mA</div>
                    <div class="detail-item"><strong>平均工作电功率: </strong>9.102 W</div>
                    <div class="detail-item"><strong>预约次数: </strong>39</div>
                    <div class="detail-item"><strong>使用次数: </strong>37</div>
                    <div class="detail-item"><strong>故障次数: </strong>0</div>
                    <div class="detail-item"><strong>计费时间: </strong>137.13小时</div>
                    <div class="detail-item"><strong>计费单价: </strong> 3848.15元 /小时</div>
                    <div class="detail-item"><strong>累积计费: </strong>527676.25元 </div>
                    <div class="detail-item"><strong>历史累积计费: </strong>391.52万元 </div>
                    <div class="detail-item"><strong>仪器价值: </strong>260万元 </div>
                    <div class="detail-item"><strong>投入产出比: </strong>1.5058 </div>
                    <div class="detail-item"><strong>收回投资周期: </strong>565天 </div>
                    <div class="detail-item"><strong>入库时间: </strong>2016-07-19 09:46:49</div>
                    <div class="detail-item"><strong>最后启动: </strong>2018-03-17 14:51:34</div>
                    <div class="detail-item detail-item-1"><strong>实际使用率（实际使用时间/通电时间）: </strong>64.77%</div>
                    <div class="detail-item detail-item-1"><strong>故障率（故障次数/预约次数）: </strong>0.00%</div>
                    <div class="detail-item detail-item-1"><strong>负载程度（预约时间/日历工作时间）: </strong>16.42%</div>
                </div>
            </Card>
            <Card style="min-height: 200px; margin-bottom: 16px;">
                <Tabs type="card" :value="panel2Mode" v-model="panel2Mode">
                    <TabPane name="I" label="电流变化"></TabPane>
                    <TabPane name="U" label="电压变化"></TabPane>
                    <TabPane name="P" label="电功率变化"></TabPane>
                </Tabs>
                <Row>
                    <chart v-if="panel2Mode==='I'" :options="lineOption" auto-resize></chart>
                    <chart v-if="panel2Mode==='U'"  :options="lineOption" auto-resize></chart>
                    <chart v-if="panel2Mode==='P'"  :options="lineOption" auto-resize></chart>
                </Row>
            </Card>
        </Row>
    </div>
</template>

<script>
import { apData, apColumns, radioColumns, wiredColumns } from "./data/AP.js";
import { clientData, clientColumns } from "./data/client.js";
import { calendarOption } from "./data/calendar.js";
import { lineOption } from "./data/second-line.js";
import { pieOption } from "./data/hour-pie.js";

export default {
  name: "AP-detail",
  data() {
    return {
      selectedDateRange: "",
      calendarOption,
      lineOption,
      pieOption,
      selectedDevice: "",
      loadingDevice: false,
      panel2Mode: "I",
      apData,
      apColumns,
      apData,
      radioColumns,
      wiredColumns,
      clientData,
      clientColumns,
      csvFileName: "",
      fontSize: 16,
      deviceOptions: [],
      dateOptions: {
        disabledDate(date) {
          return date.valueOf() > Date.now();
        }
      }
    };
  },
  methods: {
    remoteSearch(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          const list = ["D1234567890", "D1234567891"].map(item => {
            return {
              value: item,
              label: item
            };
          });
          this.deviceOptions = list.filter(
            item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
          );
        }, 200);
      } else {
        this.deviceOptions = [];
      }
    },
    exportData(type) {
      if (type === 1) {
        this.$refs.tableCsv.exportCsv({
          filename: "原始数据"
        });
      } else if (type === 2) {
        this.$refs.tableCsv.exportCsv({
          filename: "排序和过滤后的数据",
          original: false
        });
      }
    }
  }
};
</script>
